<template>
    <uni-popup ref="popup">
        <view class="popup-content">
            <view class="popup-title">
                <view class="text">输入您的联系方式，等待客服联系</view>
                <image class="close" @click="close" src="~@/static/images/close.png" mode="aspectFill"></image>
            </view>
            <view class="popup-form">
                <uni-forms ref="valiForm" :rules="rules" :modelValue="valiFormData" :border="true" label-width="180rpx">
                    <uni-forms-item label="姓名" required name="name">
                        <uni-easyinput :inputBorder="false" v-model="valiFormData.name" placeholder="请输入姓名" />
                    </uni-forms-item>
                    <uni-forms-item label="手机号码" required name="phone">
                        <view class="phone-con">
                            <uni-easyinput class="phone-input" :inputBorder="false" v-model="valiFormData.phone"
                                placeholder="请输入手机号码" />
                            <button class="get-phone" @click="getPhone">一键获取</button>
                        </view>
                    </uni-forms-item>
                </uni-forms>
            </view>
            <button class="submit-btn" type="text" @click="submit('valiForm')">提交确认</button>
        </view>
    </uni-popup>
</template>

<script>

export default {
    data() {
        return {
            // 底部弹框
            valiFormData: {
                name: '',
                phone: '',
            },
            // 校验规则
            rules: {
                name: {
                    rules: [{
                        required: true,
                        errorMessage: '姓名不能为空'
                    }]
                },
                phone: {
                    rules: [{
                        required: true,
                        errorMessage: '手机号码不能为空'
                    }]
                }
            },

        }
    },
    created() {
    },
    onLoad() {
    },
    methods: {
        getPhone() {
            // 一键获取
        },
        close() {
            this.$refs.popup.close()
        },
        submit(ref) {
            this.$refs[ref].validate().then(res => {
                console.log('success', res);
                uni.showToast({
                    title: `校验通过`
                })
            }).catch(err => {
                console.log('err', err);
            })
        },

    }
}
</script>

<style lang="scss" scoped></style>
